<template>
	<!-- 定制料预警页面 -->
	<a-card :bordered="false">
		<div class="table-page-search-wrapper">
			<a-form layout="inline">
				<a-row :gutter="48">

					<a-col :md="8" :sm="24">
						<a-form-item label="物料名称">
							<a-input v-model="queryParam.materialName" placeholder="请输入物料名称" />
						</a-form-item>
					</a-col>

					<a-col :md="8" :sm="24">
						<a-form-item label="料号">
							<a-input v-model="queryParam.materialCode" placeholder="请输入料号" />
						</a-form-item>
					</a-col>

					<a-col :md="!advanced && 8 || 24" :sm="24">
						<span class="table-page-search-submitButtons"
							:style="advanced && { float: 'right', overflow: 'hidden' } || {}">
							<a-button type="primary" @click="$refs.table.refresh(true)">查询</a-button>
							<!--<a-button style="margin-left: 8px" @click="() => queryParam = {}">重置</a-button>-->
						</span>
					</a-col>

					<a-col :md="24" :sm="24">
						<a-form-item label="供应商：">
							<!-- <FCOrgRadioGroup v-model="queryParam.orgIdSupplier"
								:filter-types="[$businessEnum.ORG_TYPE_ENUM.NORMAL_SUPPLIER.id, $businessEnum.ORG_TYPE_ENUM.PRIMARY_SUPPLIER.id]" /> -->
							<FCOrgRadioGroup1 v-model="queryParam.orgIdSupplier" :filter-types="queryParam.materialType" />
						</a-form-item>
					</a-col>

					<a-col :md="24" :sm="24">
						<a-form-item label="归属公司：">
							<FCOrgRadioGroup v-model="queryParam.orgIdCompany"
								:filter-types="[$businessEnum.ORG_TYPE_ENUM.COMPANY.id]" />
						</a-form-item>
					</a-col>

				</a-row>
			</a-form>
		</div>

		<div class="table-operator">
			<a-button type="primary"
				@click="$refs.toPoolForm.add({ materialType: queryParam.materialType, poolType: $businessEnum.ORDER_TYPE_ENUM.purchaseOrder.id, selectedRows })">
				录入采购池
			</a-button>
		</div>

		<s-table ref="table" size="default" :columns="columns" :data="loadData" :alert="true"
			:rowKey="(record) => record.materialId"
			:rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }">


			<span slot="action" slot-scope="text, record">
				<a @click="$refs.editForm.edit(record, { 'readonly': true })">详情</a>
			</span>

			<span slot="status" slot-scope="text, record">
				<a-switch checked-children="是" un-checked-children="否" :checked="record.isPurchase == 2"
					:loading="record.loading" @change="onOrderStatusChange($event, record)" />
			</span>

			<!-- <span slot="image" slot-scope="text">
				<image-preview :images="text" />
			</span> -->
			<span slot="image" slot-scope="text,record">
				<image-preview1 :images="text" :imageUrl="record.imageUrl" />
			</span>
		</s-table>

		<a-modal :visible="previewVisible" :footer="null" @cancel="previewVisible = false">
			<img style="width: 100%" :src="previewImage" />
		</a-modal>
		<edit-form ref="editForm" @ok="handleOk" />
		<to-pool-form ref="toPoolForm" @ok="handleOk" />

	</a-card>
</template>

<script>
import { STable } from '@/components'
import { pageByLowInventory, changeStatus } from '@/api/modular/main/emsmaterial/emsMaterialManage'
import editForm from '@/views/main/emsmaterial/emsMaterialEditForm'
import toPoolForm from '@/views/main/emsmaterial/emsMaterialToPoolForm1'
import { list as emsOrgList } from '@/api/modular/main/emsorg/emsOrgManage'
import FCOrgRadioGroup from '@/components/FcOrgRadioGroup/FCOrgRadioGroup'
import FCOrgRadioGroup1 from '@/components/FcOrgRadioGroup/FCOrgRadioGroup1'
export default {
	components: {
		FCOrgRadioGroup,
		FCOrgRadioGroup1,
		STable,
		editForm,
		toPoolForm
	},

	data() {
		return {
			isPurchase: '',   //是否采购
			advanced: false, // 高级搜索 展开/关闭
			queryParam: {},  // 查询参数
			columns: [
				{
					title: '序号', width: '80px',
					align: 'center',
					customRender: (text, record, index) => `${index + 1}`,
				},
				{
					title: '料号',
					dataIndex: 'materialCode'
				},
				{
					title: '物料名称',
					dataIndex: 'materialName'
				},
				{
					title: '规格',
					dataIndex: 'materialModelNumber'
				},
				{
					title: '图片',
					dataIndex: 'image',
					// customRender: (text, record, index) => this.$util.createFcImage(this.$createElement, text)
					scopedSlots: { customRender: 'image' }
				},
				{
					title: '库存',
					dataIndex: 'inventoryNumber',
					customRender: (text, record, index) => {
						let color = record.inventoryNumber < record.inventoryWarningValue ? '#FF0000' : '#FFFFFF'
						return this.$createElement('span', { style: { color } }, text)
					}
				},
				{
					title: '预警值',
					dataIndex: 'inventoryWarningValue'
				},
				// {
				//   title: '待入库数量',
				//   dataIndex: '',
				//   customRender: (text, record, index) => `【没算】`,
				// },
				{
					title: '是否采购',
					dataIndex: 'isPurchase',
					scopedSlots: { customRender: 'status' }
				},
				{
					title: '操作',
					dataIndex: 'action',
					scopedSlots: { customRender: 'action' }
				}
			],
			// 加载数据方法 必须为 Promise 对象
			loadData: parameter => {
				return pageByLowInventory(Object.assign(parameter, this.queryParam)).then((res) => {
					return res.data
				})
			},
			tableData: [],
			selectedRowKeys: [],
			selectedRows: [],
			defaultExpandedKeys: [],
			replaceFields: {
				key: 'id',
			},
			previewVisible: false,
			previewImage: '',
			materialType: 0
		}
	},
	computed: {
	},
	watch: {
	},
	methods: {
		onOrderStatusChange(checked, row) {
			row.loading = true
			let { materialId } = row
			let isPurchase = checked ? 2 : 1
			let parameter = { isPurchase, materialId }
			changeStatus(parameter).then(res => {
				if (res.success) {
					this.$message.success("切换成功")
					this.handleOk()
				}
			})
		},
		del(record) {
			del(record).then((res) => {
				if (res.success) {
					this.$message.success('删除成功')
					this.$refs.table.refresh()
				} else {
					this.$message.error('删除失败：' + res.message)
				}
			}).catch((err) => {
				this.$message.error('删除错误：' + err.message)
			})
		},
		toggleAdvanced() {
			this.advanced = !this.advanced
		},
		handleOk() {
			this.$refs.table.refresh()
		},
		onSelectChange(selectedRowKeys, selectedRows) {
			this.selectedRowKeys = selectedRowKeys
			this.selectedRows = selectedRows
		},
		preview(url) {
			this.previewVisible = true
			this.previewImage = url
		},
	},
	created() {
		this.queryParam.materialType = this.$businessEnum.MATERIAL_TYPE_ENUM.customized.id
	}
}
</script>

<style lang="less">
.table-operator {
	margin-bottom: 18px;
}

button {
	margin-right: 8px;
}

.table-image {
	cursor: pointer;
	max-width: 100px;
	max-height: 50px;
	border: solid 1px #cccccc;
}
</style>
